import { defineStore } from 'pinia'
import { ref,watch } from 'vue'

// 最初状态
function initState() {
    return {
        // 最初菜单折叠状态
        isCollapase: false,
        // 首页标签
        tags:[
            {
                path:'/home',
                name:'home',
                icon:'home',
                label:'首页'
            }
        ],
        currentMenu:null,
        // 存储菜单项
        menuList:[],
        // token值
        token:'',
        // 储存路由列表
        routeList:[],
        
    }
}

// 管理状态
export const userAllDateStore = defineStore('allDate', () => {
    // 定义状态
    const state = ref(initState())

    // 使用watch监听state
    watch(state,(newObj) => {
        if(!newObj.token) return   // 如果不存在token，代表用户退出，不需要操作，则直接返回
        localStorage.setItem('store',JSON.stringify(newObj))  // 如果变化，将新的token存储到缓存
    },{deep:true})

    // 定义选中菜单的方法  val为菜单内容对象
    function selectMenu(val){
        if(val.name === 'home'){
            // 首页不变换，所以不需要添加或删除首页的标签
            state.value.currentMenu = null
        }else{
            // 如果不是首页的路由页面下标，则跳转到对应的页面
            let index = state.value.tags.findIndex((item)=>item.name == val.name)
            index===-1?state.value.tags.push(val):''
        }
    }

    // 定义更新标签的方法
    function updateTags(tag){
        // 如果打开对应标签的页面，则删除该标签
        let index = state.value.tags.findIndex((item)=>item.name == tag.name)
        state.value.tags.splice(index,1)
    }

    // 更新菜单的方法
    function updateMenuList(val){
        state.value.menuList = val
    }

    // 添加菜单路由的方法
    function addMenu(router,type){
        // 判断是否为刷新
        if(type === "refresh"){
            // 判断本地存储是否有store
            if(JSON.parse(localStorage.getItem('store'))){
                // 将本地的store赋值给当前的state
                state.value = JSON.parse(localStorage.getItem('store'))
                // 对routeList重新赋值
                state.value.routeList = []
            }else{
                return
            }
        }
        const menu =  state.value.menuList
        const modules = import.meta.glob('../views/**/*.vue')
        const routeArr = []
        menu.forEach((item)=>{
            // 判断是否有子菜单
            if(item.children){
                // 将子菜单进行文件路径匹配
                item.children.forEach((val)=>{
                    let url = `../views/${val.url}.vue`
                    val.component = modules[url]
                })
                routeArr.push(...item.children)
            }else{
                // 若没有子菜单 匹配
                let url = `../views/${item.url}.vue`
                item.component = modules[url]
                routeArr.push(item)
            }
        })

        // 清空路由列表
        state.value.routeList = []
        // 获取所有路由
        let routers = router.getRoutes()
        // 遍历路由
        routers.forEach((item)=>{
            if(item.name === 'main' || item.name === 'login'){
                return
            }else{    // 当是其他路由时，移除
                router.removeRoute(item.name)
            }
        })
        routeArr.forEach((item)=>{
            state.value.routeList.push(router.addRoute('main',item))
        })
    }

    return {
        state,
        selectMenu,
        updateTags,
        updateMenuList,
        addMenu
    }
})